import { Component, OnInit, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
import { AutocompleteItem } from '@iux/live';

@Component({
  templateUrl: './custom-styles.component.html',
  styles: [
    `
      .panel-class > ul {
        border: 1px solid #f00;
      }
      .panel-class .lv-autocomplete-item-selected p {
        color: #b4c8ff;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomStylesComponent implements OnInit {
  data: AutocompleteItem[];
  value: string = 'item1';
  @ViewChild('input', { static: true }) input: ElementRef<any>;

  ngOnInit(): void {
    this.data = this.getMenus();
  }

  getMenus(): AutocompleteItem[] {
    const arr = [
      {
        value: 'item1',
        desc: 'This is description...',
      },
      {
        value: 'item2',
        desc: 'This is description...',
      },
      {
        value: 'item3',
        desc: 'This is description...',
      },
    ];

    return arr;
  }
}
